<template>
  <div>
  <div v-show="dataselect==false">
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.tname" placeholder="指标树名" clearable></el-input>
          <el-input v-model="searchModel.time" placeholder="创建时间" clearable></el-input>
          <el-button type="primary" round icon="el-icon-search" @click="getTreeList">查询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="treeList" stripe style="width: 100%">
        <el-table-column label="#" width="120">
          <template slot-scope="scope">
        <!--    (pageNo-1) * pageSize + index + 1      -->
            {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="tid" label="tid" width="120"> </el-table-column>
        <el-table-column prop="tname" label="指标树名" width="180`">
        </el-table-column>
        <el-table-column prop="time" label="创建时间"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!--    点击后进入数据导入，需添加方法     -->

            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              >
              <span>
                <el-upload class="upload-demo"
                  ref="upload"
                  drag
                  action="http://localhost:9999//upload/file"
                  multiple
                  :auto-upload="false"
                  :limit="5"
                  :on-success="handleFilUploadSuccess"
                  :on-remove="handleRemove"
                  accept=".xml,.xlsx,.xls,.json"
                  >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">上传文件不超过（     ）kb</div>
                </el-upload>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpload">确 定</el-button>
              </span>
            </el-dialog>
            <el-button @click="handleUpdate(scope.row.tid)" type="success"  icon="el-icon-s-promotion" circle size="mini"></el-button>
            <el-button @click="openEditForm(scope.row.tid)" type="primary" icon="el-icon-edit" circle size="mini"></el-button>
            <el-button @click="deleteTree(scope.row)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--  用户编辑对话框  -->
    <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="treeForm" ref="treeFormRef">

        <el-form-item label="指标树名" prop="tname" :label-width="formLabelWidth">
          <el-input v-model="treeForm.tname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="time" :label-width="formLabelWidth">
          <el-input v-model="treeForm.time" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTree">确 定</el-button>
      </div>
    </el-dialog>

  </div>
  <!--  用户选择一条上传的数据  -->
  <div v-show="dataselect==true">
    <el-table :data="data" border>
      <el-table-column type="index" label="#"></el-table-column>

      <el-table-column v-for="(leaf, index) in data[0].leafs" :key="index" :prop="'leafs[' + index + '].value'" :label="leaf.name"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="dataimport(scope.$index)">导入</el-button>
        </template>
    </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
import treeApi from '@/api/treeManage'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      total: 0,
      title: "",
      dialogFormVisible: false,
      formLabelWidth: '130px',
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      tid: 0,
      treeList: [],
      treeForm: {

      },
      //数据上传显示界面
      dialogVisible: false,
      //上传成功后显示的界面
      dataselect:false,
      //示例数据
      data: [
        {
          leafs: [
            { name: '列1名称', value: '列1值1' },
            { name: '列2名称', value: '列2值1' },
            // ... 更多的列数据
          ],
        },
        {
          leafs: [
            { name: '列1名称', value: '列1值2' },
            { name: '列2名称', value: '列2值2' },
            // ... 更多的列数据
          ],
        },
        // ... 更多的行数据
      ],
      returndata:{
        tid:0,
        values:[]
      }
    };
  },
  methods: {
    deleteTree(tree) {
      this.$confirm(`您确认删除指标树 ${tree.tname} ?`, '是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        treeApi.deleteTreeById(tree.tid).then( response => {
          this.$message({
            type: 'success',
            message: response.message
          });
          this.getTreeList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    saveTree() {
      this.$refs.treeFormRef.validate((valid) => {
        if (valid) {
          // 提交后端
          treeApi.saveTree(this.treeForm).then( response => {
            // 成功提示
            this.$message({
              message: response.message,
              type: 'success'
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表格
            this.getTreeList();
          });
        } else {
          return false;
        }
      });
    },
    clearForm() {
      this.treeForm = {};
      this.$refs.treeFormRef.clearValidate();
    },
    openEditForm(tid) {
      // this.title = '修改指标树';
      // treeApi.getTreeById(tid).then( response => {
      //   this.treeForm = response.data;
      // });
      // this.dialogFormVisible = true;
      this.$router.push({
        name: 'tree',
        params: {
          tid: tid,
          boolSkip: true
        }
      })
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getTreeList();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getTreeList();
    },
    handleRemove(file,fileList) {
		  console.log(file,fileList);
		},
		submitUpload() {
			this.$refs.upload.submit();
		},
		// 文件上传成功时的函数
		handleFilUploadSuccess (res,file,fileList) {
      this.$refs.upload.clearFiles()
      const jsonData = JSON.parse(res.data.data);
      // if (Array.isArray(jsonData.data)) {
      //   console.log("123")
      // }
      this.data=jsonData.data;
      this.dataselect=true;
			this.$message.success("上传成功")
		},
		handleUpdate (tid) {
			this.dialogVisible = true;
      this.tid = tid
		},
		// 处理文件上传的函数
		handleUpload () {
			// console.log(res,file)
			this.submitUpload()
			this.dialogVisible = false
		},
    //点击数据后，将数据导入树中
    dataimport(row){
      this.returndata.values=this.data[row].leafs
      this.returndata.tid=this.tid
      //发送returndata给treeManage.js，再发送给后端进行处理
      treeApi.calTree(this.returndata).then(response => {
        console.log(response.data.tree)
        this.$router.push({
          name: 'tree',
          params: {
            tree:response.data.tree,
            message:response.data.message,
            boolCal:true
          }
        })
      })
    },
    getTreeList() {
      this.$set(this.searchModel, 'token', getToken());
      treeApi.getTreeList(this.searchModel).then(response => {
        this.treeList = response.data.treeList;
        this.total = response.data.total;
      });
    }
  },
  created() {
    this.getTreeList();
  }
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}
.el-dialog .el-input {
  width: 55%;
}
</style>
